<template>
  <div class="md-template-business-component">
    <div class="md-search">
      <div class="md-search-tabs-group">
        <div class="md-search-tabs">
          <p class="md-gorup-name">行业</p>
          <div class="md-group-list">
            <el-tabs v-model="search.templateType1" @tab-click="getDataList">
              <el-tab-pane label="全部" name="0"></el-tab-pane>
              <el-tab-pane v-for="item in typeList1" :key="item.id" :label="item.templateType" :name="`${item.id}`"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="md-search-tabs">
          <p class="md-gorup-name">风格</p>
          <div class="md-group-list">
            <el-tabs v-model="search.templateType2" @tab-click="getDataList">
              <el-tab-pane label="全部" name="0"></el-tab-pane>
              <el-tab-pane v-for="item in typeList2" :key="item.id" :label="item.templateType" :name="`${item.id}`"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="md-search-form">
        <el-input prefix-icon="el-icon-search" v-if="search.title" placeholder="请输入模版名称、ID" size="small" />
      </div>
    </div>

    <div class="md-activity" :style="{height: height}">
      <div class="item" v-for="item in list" :key="item.id" :class="[params.tempUrl===item.showImg?'current':'']" @click="handleSelect(item)">
        <div class="cur" v-if="params.tempUrl===item.showImg">使用中</div>
        <div class="cover">
          <img :src="item.showImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdTemplateBusinessComponent',
  props: {
    params: {
      type: Object,
      default: () => { }
    },
    height: {
      type: String,
      default: '480px'
    }
  },
  data () {
    return {
      activeName: '1',
      search: {
        pageNum: 1,
        pageSize: 100,
        title: null,
        templateType1: null,
        templateType2: null
      },
      typeList1: [],
      typeList2: [],
      list: [],
      total: 0
    }
  },
  mounted () {
    this.getTemplateTypeData()
    this.getDataList()
  },
  methods: {
    async getTemplateTypeData () {
      try {
        this.typeList1 = []
        this.typeList2 = []

        const res = await this.$http.get(`/system/activityTemplate/list`, {
          params: {
            pageNum: 1,
            pageSize: 100
          }
        })

        if (res.code === 200 && res.rows && res.rows.length > 0) {
          this.typeList1 = res.rows.filter((e) => e.type === 1)
          this.typeList2 = res.rows.filter((e) => e.type === 2)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getDataList () {
      try {
        const params = Object.assign({}, { ...this.search })

        if (params.templateType1 === '0') {
          params.templateType1 = null
        }

        if (params.templateType2 === '0') {
          params.templateType2 = null
        }

        const res = await this.$http.get('/system/activity/template', {
          params: {
            ...params
          }
        })

        if (res.code === 200) {
          this.list = res.rows
          this.total = res.total
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleSelect (item) {
      this.$emit('selected', { id: item.id, content: item.showImg, templateUrl: item.templateUrl })
    }
  }
}
</script>

<style lang="less" scoped>
.md-template-business-component {
  width: 100%;
  box-sizing: border-box;
  .md-search {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    .md-search-tabs-group {
      width: 100%;
      flex: 1;
      margin-bottom: 20px;
      .md-search-tabs {
        width: 100%;
        .md-gorup-name {
          float: left;
          width: 6%;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #acacac;
        }
        .md-group-list {
          float: left;
          width: 94%;
          ::v-deep .el-tabs {
            width: 100%;
            .el-tabs__header {
              margin: 0px;
              .el-tabs__nav-wrap {
                &::after {
                  display: none !important;
                }
                .el-tabs__active-bar {
                  background-color: @md-primary-acolor;
                }
                .el-tabs__item {
                  font-size: 13px;
                  font-weight: normal;
                  color: #666;
                  &.is-active {
                    color: @md-primary-acolor;
                  }
                }
              }
            }
            .el-tabs__content {
              display: none;
            }
          }
        }
        .clearfix();
      }
    }
    .md-search-form {
      width: 200px;
    }
  }
  .md-activity {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 7px;
    .scroll-bar(5px,5px);
    .item {
      border: 1px solid #f5f5f5;
      border-radius: 6px;
      width: 205px;
      overflow: hidden;
      margin-right: 26px;
      margin-bottom: 20px;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: transform 0.25s ease-out, background 0.45s;
      &:nth-child(4n) {
        margin-right: 0px;
      }
      &:hover {
        box-shadow: 0 20px 60px rgb(61 79 127 / 17%);
        transform: translateY(-6px);
      }
      .cover {
        width: 100%;
        height: 353px;
        overflow: hidden;

        img {
          width: 100%;
          object-fit: cover;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
      }
      &.current {
        .cur {
          position: absolute;
          left: -26px;
          top: -7px;
          background-color: #e91611;
          color: #fff;
          z-index: 2;
          font-size: 12px;
          text-align: center;
          padding: 15px 20px 5px 20px;
          transform: rotate(-45deg);
        }
      }
    }
  }
}
</style>
